<style>
    .top-panel {border:1px solid #eceff9;border-radius:5px;text-align:center;}
    .top-panel > .layui-card-body {height:60px;}
    .top-panel-number {line-height:60px;font-size:30px;border-right:1px solid #eceff9;}
    .top-panel-tips {line-height:30px;font-size:12px}
</style>
<div class="layuimini-container layuimini-page-anim">



        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12">
                <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12">
                <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use([ 'axios','echarts'], function () {
        var $ = layui.jquery,
            echarts=layui.echarts;
        var axios = layui.axios;

        axios.post('user/queryTongjiList', {}).then(function(response){
            var data=response.data;
            var str="";//放置名称
            var str2=""//放置对应的数据
            for(var p in  data){
                str=str+data[p].name+",";
            }
            str=str.substring(0,str.length-1);
            var strResult=str.split(",");

            for(var p in  data){
                str2=str2+data[p].counts+",";
            }
            str2=str2.substring(0,str2.length-1);
            var strResult2=str2.split(",");

            /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-dataset'), 'walden');

        var optionRecords = {
            title: {
                text: '指标名称-报表图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: strResult
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '统计信息',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {},
                    data: strResult2
                }
            ]
        };
        echartsRecords.setOption(optionRecords);


        //遍历数据修改成统计表所需要的格式
            for(var p in data){
                for(var j in data[p]){
                    if(j=='counts'){
                        data[p]['value']=data[p][j];
                        delete data[p]['counts'];
                    }
                }
            }

            //转json对象
            var datas=JSON.stringify(data);


        /**
         * 玫瑰图表
         */
        var echartsPies = echarts.init(document.getElementById('echarts-records'), 'walden');
        var optionPies = {
            title: {
                text: '指标名称-玫瑰图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data: JSON.parse(datas),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsPies.setOption(optionPies);

        })


        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
